<script setup lang="ts">
import { RouterView } from 'vue-router'
import LoadingScreen from './components/LoadingScreen.vue'
import { ref } from 'vue'

const appLoaded = ref(false)

const handleLoadingComplete = () => {
  appLoaded.value = true
  document.body.classList.add('appLoaded')
}
</script>

<template>
  <LoadingScreen @loading-complete="handleLoadingComplete" />
  <div class="appContainer" :class="{ 'visible': appLoaded }">
    <RouterView />
  </div>
</template>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.appContainer {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.appContainer.visible {
  opacity: 1;
}

.appLoaded {
  overflow: auto;
}
</style>
